<template>
	<view class="box">
		<!-- <view class="status_bar"></view> -->
		<image style="width: 100vw;height: 100vh;padding-left: -8rpx;" src="/static/image/yq.jpg" mode=""></image>
		<view class="left" @click="left">
			<fui-icon color="#fff" name="arrowleft"></fui-icon>
		</view>
		<view class="content">
			<view class="flex">
				<view class="flex_box">
					<view class="title">
						邀请人数
					</view>
					<view class="num">
						{{data?.subordinate_total||0}}
					</view>
				</view>
				<view class="flex_box">
					<view class="title">
						有效人数
					</view>
					<view class="num">
						{{data?.valid_subordinate||0}}
					</view>
				</view>
				<view class="flex_box">
					<view class="title">
						获得奖励
					</view>
					<view class="num">
						{{data?.invite_reward||0}}
					</view>
				</view>
			</view>
		</view>
		<view class="btn">
			<fui-button @click="yqhy" size="35rpx" radius="96rpx" background="linear-gradient(90deg, #fc750d 0%, #fd5531 100%)" text="立即邀请好友" ></fui-button>
		</view>
		<view class="bottom">
			<view style="margin-top: 10rpx;">1.普通用户：拉新奖励：一级0.2元，二级0.1元。</view>
			<view style="margin-top: 10rpx;">2.月卡会员 或 永久会员权益</view>
			<view style="margin-top: 10rpx;">&nbsp;&nbsp;&nbsp;拉新奖励：一级1元，二级0.5元。</view>
			<view style="margin-top: 10rpx;">&nbsp;&nbsp;&nbsp;活跃奖励：一级0.5元，二级0.1元。</view>
			<view style="margin-top: 10rpx;">&nbsp;&nbsp;&nbsp;消费提成：一级40%，二级10%。</view>
		</view>
	</view>
</template>

<script setup>
	const marketingApi = uniCloud.importObject('qc-marketing', { customUI: true })
    import { ref, reactive,computed } from 'vue'
	import { LoginStore } from "@/store/modules/login.js";
	const userInfo = computed(() => (LoginStore().userInfo))
    import { onLoad } from "@dcloudio/uni-app";
	const data = ref()
	onLoad(async()=>{
		const res = await marketingApi.getinviteUser({user_id:userInfo?.value._id})
		data.value = res.data
	})
	const left = ()=>{
		uni.navigateBack()
	}
	const yqhy = ()=>{
		uni.$fui.href("/pages/user/share/share")
	}
</script>

<style lang="scss" scoped>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
	.bottom{
		color: var(--fui-color-subtitle);
		font-size: 30rpx;
		// border: 5px solid #fd5531;
		// padding: 40rpx;
		// min-height: 200rpx;
		width: 80%;
		position: absolute;
		top: 75%;
		// background-color: #fff;
		left: 50%;
		border-radius: 20rpx;
		transform: translateX(-50%);
		font-size: 25rpx;
	}
	.box{
		position: relative;
	}
		
	.left{
		position: absolute;
		top: 100rpx;
		left: 30rpx;
	}
	
	.content{
		position: absolute;
		top: 45%;
		left: 50%;
		width: 70%;
		transform: translateX(-50%);
	}
	.btn{
		position: absolute;
		bottom: 40%;
		left: 50%;
		width: 70%;
		transform: translateX(-50%);
	}
	.flex{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
		
	.num{
		padding: 18rpx;
		text-align: center;
		color: #fd5531;
		font-weight: bold;
		font-size: 50rpx;
	}
</style>
